<template>
    <div style="float:left;background-color: paleturquoise">
                <div style="height: 420px;background-color: cornsilk" >

                    <!--                <el-button v-text="data.core"></el-button>-->
                    <!--                <div v-text="data.datetime.toLocaleTimeString()"></div>-->
                    <div class="block">
                        <el-timeline>
                            <el-timeline-item style="font-size: small;font-style: italic;"
                                              v-for="(data, index) in datas"
                                              :key="index"
                                              :icon="'el-icon-more'"
                                              :timestamp="data.dateTime">
                                {{data.core}}
                            </el-timeline-item>
                        </el-timeline>
                    </div>

                </div>
<!--        <div class="chatScroll" ref="divScroll">-->
<!--            <ul>-->
<!--                <li v-for="i in datas" :key="i">-->
<!--                    <div>-->
<!--                        {{i.dateTime}}-->
<!--                    </div>-->
<!--                    {{i.core}}-->
<!--                </li>-->
<!--            </ul>-->
<!--        </div>-->
        <br/>
        <el-form>
                <el-input ref="toSend" v-model="content.core"
                          @keyup.enter.native="sendMsg" @keyup.esc.native="quitRoom"></el-input>
                <el-button type="warning" @click="sendMsg" style="float:left">发送</el-button>
                <el-button>{{roomCode}}</el-button>
                <el-button type="danger" @click="quitRoom" style="float:right">退出聊天室</el-button>
        </el-form>
        <!--        <el-button type="primary" @click="enterRoom('999')">进入聊天室</el-button>-->

    </div>
</template>

<script>
    // import New from './components/New.vue';
    import BScroll from 'better-scroll'

    export default {

        name: "Room",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {

                roomCode: '998',
                //回复内容结构 sub ed
                data: {
                    core: '',
                    dateTime: '',
                },
                //请求内容结构 send
                content: {
                    ip: '127.0.0.1',
                    core: '',
                },
                datas: [],
                roomSubId: '',
                scroll: null,
            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        mounted() {
            this.roomCode = this.$route.params.id;
            if (!this.$messageTemplate.connected === true) {
                this.$message.warning("未链接或链接已断开，请重新刷新页面")
                this.$router.push("/wechat/roomlist")
                return;
            }
            this.datas = []
            this.data = {}

            this._debug_msgTemp()
            var k = this.$messageTemplate.subscribe("/title/" + this.roomCode, this._handleData, {})
            this._debug_msgTemp()
            this.roomSubId = k.id;
            setTimeout(() => {
                this.scroll = new BScroll(this.$refs.divScroll, {

                    click: true,
                    bounce: false,
                    scrollbar: true,
                    preventDefault: false,
                    tap: true,
                    mouseWheel: true

                });
            }, 20);
            this.$message.warning("欢迎你光临本聊天室")
            this.$refs['toSend'].focus()
        },
        beforeRouteUpdate(to, from, next) {
            this.roomCode = to.params.id;
            this.datas = []
            this.data = {}
            if (this.messageTemplate.connected === true) {
                this._debug_msgTemp()
                var k = this.$messageTemplate.subscribe("/title/" + this.roomCode, this._handleData, {});
                this.roomSubId = k.id;
                this._debug_msgTemp()
                this.$message.warning("欢迎你光临本聊天室" + JSON.stringify(k))
            } else {
                this.$message.warning("未链接或链接已断开，自动返回主页，请重新进入")
                this.$router.push('/wechat/roomlist')

            }
            next()
        },
        methods: {

            _handleData(msg) {
                this.data = JSON.parse(msg.body);
                this.data.dateTime = this.data.dateTime.split('.')[0]
                if (this.datas.length > 14) {
                    this.datas.splice(0, 8, this.data)
                } else {
                    this.datas.push(this.data)
                }

                // this.scroll.refresh();
                this.scroll.scrollTo(0, this.scroll.maxScrollY)

            },
            sendMsg() {
                this._sendMsg()
                this.$refs['toSend'].clear()
                this.$refs['toSend'].focus()

            },
            _sendMsg() {
                if (!this.$messageTemplate.connected) {
                    this.$message.error('您没有成功链接到服务器，所以无法发送消息，请尝试重新登录')
                    return;
                }
                this.$messageTemplate.send("/wsapp/msgController/" + this.roomCode, {}, JSON.stringify(this.content))

            },
            quitRoom() {

                this._debug_msgTemp()
                this.$messageTemplate.unsubscribe(this.roomSubId)
                this._debug_msgTemp()
                this.$message.warning("您已经离开弹幕聊天室" + this.roomSubId)
                this.$router.push('/wechat/roomlist');
            },
            _debug_msgTemp() {
                console.log("开始透视：")
                console.log(`客户端是否关闭链接　${this.$messageTemplate.connected}`)
                console.log(`客户端订阅自增id已经到了 ：${this.$messageTemplate.counter}`)
                for (let i in this.$messageTemplate.subscriptions) {

                    console.log(`客户端目前持有的订阅条目 ${i}`)
                }
                console.log("结束透视")
            }
        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },

    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/
    /*.chatScroll {*/
    /*    height: 200px;*/
    /*    width: 200px;*/
    /*    background-color: lightslategray;*/
    /*    overflow: hidden;*/
    /*}*/
    /*ul li{*/
    /*    height:40px;*/
    /*}*/
</style>